﻿@{
    Layout = "~/Views/Shared/_Index.cshtml";
}
@inject Microsoft.AspNetCore.Hosting.IWebHostEnvironment HostingEnvironment
@section header{
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/vue.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/css/element-index.css"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/element-index.js"))
    @BundlerHelper.Render(HostingEnvironment.ContentRootPath, Url.Content("~/shris/js/axios.js"))
}
<div class="container-div" id="toolManage_cc03-vue">
    <el-row :gutter="20" style="font-size:20px;margin-bottom:10px">
        <el-col :span="6">
            <div style="height:28px"></div>
            <span>设备名称：</span>
            <span>{{deviceName}}</span>
        </el-col>
        <el-col :span="6" v-show="show_houseIndex">
            <div>
                <i class="el-icon-back" style="cursor:pointer;" v-on:click="BackDevice()"></i>
            </div>
            <span>刀库名称：</span>
            <span>{{ToolHouseName}}</span>
        </el-col>
        <el-col :span="6" v-show="show_toolNumber">
            <div>
                <i class="el-icon-back" style="cursor:pointer;" v-on:click="BackHouse()"></i>
            </div>
            <span>刀具号：</span>
            <span>{{toolNumber}}</span>
        </el-col>
    </el-row>
    <div class="table-toolStoreInfo" v-show="show_toolStoreInfo">
        <el-table :data="toolStoreInfo"
                  style="width: 100%"
                  border>
            <el-table-column type="index"
                             label="序号">
            </el-table-column>
            <el-table-column prop="ToolHouseName"
                             label="刀库名称">
            </el-table-column>
            <el-table-column prop="ToolHouseIndex"
                             label="刀库号">
            </el-table-column>
            <el-table-column prop="ToolPlaceCount"
                             label="刀具数量">
            </el-table-column>
            <el-table-column label="详情" fixed="right">
                <template slot-scope="scope">
                    <a v-on:click="showToolInfo(scope.row)" href="javascript:void(0)">查看</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="table-toolInfo" v-show="show_toolInfo">
        <el-table :data="toolInfo"
                  style="width: 100%"
                  border>
            <el-table-column type="index"
                             label="序号">
            </el-table-column>
            <el-table-column prop="ToolName"
                             label="刀具名称">
            </el-table-column>
            <el-table-column prop="ToolIndex"
                             label="刀具号">
            </el-table-column>
            <el-table-column prop="ToolHouseIndex"
                             label="所属刀库号">
            </el-table-column>
            <el-table-column prop="ToolPlace"
                             label="刀具位置">
            </el-table-column>
            <el-table-column label="刀补历史" fixed="right">
                <template slot-scope="scope">
                    <a v-on:click="showToolDetail(scope.row)" href="javascript:void(0)">查看</a>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="table-toolOffset" v-show="show_toolOffset">
        <el-table :data="toolOffset"
                  style="width: 100%"
                  border>
            <el-table-column type="index"
                             label="序号">
            </el-table-column>
            <el-table-column prop="ToolIndex"
                             label="刀具索引号">
            </el-table-column>
            <el-table-column prop="ToolType"
                             label="刀具类型">
            </el-table-column>
            <el-table-column prop="ToolGeometryX"
                             label="刀具长度 X">
            </el-table-column>
            <el-table-column prop="ToolGeometryZ"
                             label="刀具长度 Z">
            </el-table-column>
            <el-table-column prop="ToolGeometryR"
                             label="刀具半径">
            </el-table-column>
        </el-table>
    </div>
</div>

<script>
    let app = new Vue({
        el: "#toolManage_cc03-vue",
        data: {
            deviceCode: "Lathe03",
            toolStoreInfo: [
            ],
            show_toolStoreInfo: true,
            toolInfo: [
            ],
            show_toolInfo: false,
            toolOffset: [
            ],
            show_toolOffset: false,
            deviceName: "车床3",
            ToolHouseName: '',
            show_houseIndex: false,
            toolNumber: '',
            show_toolNumber: false
        },
        methods: {
            // 查看刀具信息
            showToolInfo(row) {
                this.ToolHouseName = row.ToolHouseName;
                this.show_toolInfo = true;
                this.show_houseIndex = true;
                this.show_toolStoreInfo = false;
                this.show_toolStoreInfo = false;
                this.show_toolNumber = false;
                this.show_toolOffset = false;
            },
            // 查看刀具详情
            showToolDetail(row) {
                this.toolNumber = row.ToolName;
                this.show_toolOffset = true;
                this.show_toolInfo = false;
                this.show_toolNumber = true;
                const toolIndex = row.ToolIndex;
                let url = '@Url.Content("~/ToolManage/ToolDetail/GetToolDetail")'
                axios.get(url, {
                    params: { deviceCode: this.deviceCode, toolIndex: toolIndex }
                }).then(res => {
                    console.log(res)
                    this.toolOffset = [];
                    if (res.data.toolEdgeInfo != null) {
                        this.toolOffset.push({
                            ToolIndex: res.data.toolEdgeInfo.ToolIndex,
                            ToolType: res.data.toolEdgeInfo.ToolType,
                            ToolGeometryX: new Number(res.data.toolEdgeInfo.ToolGeometryX).toFixed(2),
                            ToolGeometryZ: new Number(res.data.toolEdgeInfo.ToolGeometryZ).toFixed(2),
                            ToolGeometryR: new Number(res.data.toolEdgeInfo.ToolGeometryR).toFixed(2)
                        })
                    }
                }).catch(err => {
                    this.$message({
                        showClose: true,
                        duration: 3000,
                        message: '错误！' + err,
                        type: 'error',
                        offset: 80
                    })
                })
            },
            // 返回设备刀库
            BackDevice() {
                this.show_toolInfo = false;
                this.show_toolOffset = false;
                this.show_toolStoreInfo = true;
                this.show_houseIndex = false;
                this.show_toolNumber = false;
            },
            // 返回刀库信息
            BackHouse() {
                this.show_toolInfo = true;
                this.show_toolOffset = false;
                this.show_toolStoreInfo = false;
                this.show_houseIndex = true;
                this.show_toolNumber = false;
            },
            // 获取刀库信息
            getToolData() {
                let url = '@Url.Content("~/ToolManage/ToolDetail/GetToolData")'
                axios.get(url, {
                    params: {
                        deviceCode: this.deviceCode
                    }
                }).then(res => {
                    let data = res.data;
                    console.log(data)
                    if (data.toolHouseDescription != null) {
                        this.toolStoreInfo = [];
                        let obj = {
                            ToolHouseIndex:data.toolHouseDescription.ToolHouseIndex,
                            ToolHouseName:data.toolHouseDescription.ToolHouseName,
                            ToolPlaceCount:data.toolHouseDescription.ToolPlaceCount
                        }
                        this.toolStoreInfo.push(obj)
                    }
                    if (data.toolinfo != null) {
                        this.toolInfo = [];
                        for (let i = 0; i < data.toolinfo.length; i++) {
                            let obj = {
                                ToolHouseIndex:data.toolinfo[i].ToolHouseIndex,
                                ToolIndex:data.toolinfo[i].ToolIndex,
                                ToolName:data.toolinfo[i].ToolName,
                                ToolPlace:data.toolinfo[i].ToolPlace
                            }
                            this.toolInfo.push(obj)
                        }
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
        },
        mounted() {
            this.getToolData();
        }
    })
</script>

